{% extends "my/layout.html" %}

{% block my %}
<div class="container">
    <h3>购物车</h3>
    <hr>

    {% if cart_items %}
    <div class="row">
        <p>购物车中共有 <span id="cart_num">{{cart_num}}</span>个产品:</p>

        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>序号</th>
                <th>服务名称</th>
                <th>周期</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in cart_items %}
            <tr>
                <td>{{loop.index}}</td>
                <td>{{item.title}}</td>
                <td>{{item.period|period}}</td>
                <td>{{item.price/100}}元</td>
                <td><span href="#" class="cart-remove btn btn-danger" data-value="{{item.index}}">删除</span></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

        <a href="javascript:void(0);" class="btn btn-success" id="pay"> 去结算 </a>
    </div>

    {% else %}
    <div class="row">
        <div class="col-xs-3">
            <form action="{{url_for('over.handlers.my.cart.add')}}" class="form-inline" method="post">
                <input type="hidden" value="1" name="product">
                <button class="btn btn-success">加入购物车(8元/月)</button>
            </form>
        </div>
        <div class="col-xs-3">
            <form action="{{url_for('over.handlers.my.cart.add')}}" class="form-inline" method="post">
                <input type="hidden" value="2" name="product">
                <button class="btn btn-success">加入购物车(8元/月)</button>
            </form>
        </div>
    </div>
    {% endif %}


</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
    $(function () {
        $(".cart-remove").click(function () {
            var $this = $(this);
            var index = $this.attr("data-value");

            $.post('{{url_for("over.handlers.my.cart.remove")}}', {'index': index}, function (data) {
                if (data.success === true) {
                    $this.parent().parent().hide();
                    if (data.number === 0) {
                        location.href = '{{url_for("over.handlers.my.cart.index")}}';
                    } else {
                        $("#cart_num").val(data.number);
                    }
                } else {
                    alert(data.error);
                }
            });
        });

        $("#pay").on('click', function(){
            var url = "{{url_for('over.handlers.my.order.new')}}";
            ss.dynamicFormPost(url);
        })

    });
</script>
{% endblock %}